<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Widgets in Qyoto</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Widgets, Qt, Qyoto, Visual Basic">
<meta name="description" content="Widgets in Qyoto">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Widgets in Qyoto</h1>

<p>
In this part of the Visual Basic Qyoto programming tutorial, we will cover Qyoto widgets. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 

<p>
Widgets are basic building blocks of a GUI application. Over the years, several widgets became
a standard in all toolkits on all OS platforms. For example a button, a check box or a scroll bar. 
Qyoto has a rich set of widgets which cover most of the programming needs.
More specialized widgets can be created as custom widgets. 
</p>


<h2>QCheckBox</h2>

<p>
The <b class="keyword">QCheckBox</b> is a widget, that has two states. On and Off. 
The On state is visualized by a check mark. It is used to denote some boolean property. 
The QCheckBox widget provides a checkbox with a text label.
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial

' This program toggles the title of the
' window with the QCheckBox widget
'
' author jan bodnar
' last modified April 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QWidget

    Public Sub New()
    
        Me.SetWindowTitle("QCheckBox")
    
        Me.InitUI()
        
        Me.Resize(250, 200)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    
    Private Sub InitUI()
    
        Dim cb As New QCheckBox("Show title", Me)
        cb.Move(50, 50)
        cb.SetCheckState(True)
        Connect(cb, SIGNAL("clicked(bool)"), Me, SLOT("OnToggle(bool)"))
        
    End Sub

    &lt;Q_SLOT()&gt; _
    Private Sub OnToggle(ByVal state As Boolean)

        If state
             Me.SetWindowTitle("QCheckBox")
        Else
             Me.SetWindowTitle("")
        End If
       
    End Sub

    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
In our example, we place a check box on the window. The check box shows/hides the title
of the window. 
</p>

<pre class="explanation">
Me.SetWindowTitle("QCheckBox")
</pre>

<p>
During the construction of the window, we set a title for the window. 
</p>

<pre class="explanation">
Dim cb As New QCheckBox("Show title", Me)
</pre>

<p>
The <b class="keyword">QCheckBox</b> widget is created. The first
parameter of the constructor is its text label. The second parameter
is the parent widget. 
</p>

<pre class="explanation">
cb.SetCheckState(True)
</pre>

<p>
The title is visible at the start of the application. So the check box must
be checked too. We use the <b class="keyword">SetCheckState()</b> method to check the 
check box. 
</p>

<pre class="explanation">
Connect(cb, SIGNAL("clicked(bool)"), Me, SLOT("OnToggle(bool)"))
</pre>

<p>
The <b class="keyword">clicked(bool)</b> signal is emitted when we click
on the check box. When the signal is emitted, we trigger the
<b class="keyword">OnToggle()</b> method. 
</p>

<pre class="explanation">
&lt;Q_SLOT()&gt; _
Private Sub OnToggle(ByVal state As Boolean)
...
End Sub
</pre>

<p>
The method definition is preceded by a <b class="keyword">Q_SLOT()</b> attribute. 
This attribute informs a compiler about a custom slot.
</p>

<pre class="explanation">
If state
    Me.SetWindowTitle("QCheckBox")
Else
    Me.SetWindowTitle("")
End If
</pre>

<p>
Depending on the state of the check box, we show or hide the title of the 
window. 
</p>

<br>
<img src="/img/gui/vbqyoto/qcheckbox.png" alt="QCheckBox">
<div class="figure">Figure: QCheckBox</div>


<h2>QLabel</h2>

<p>
The <b class="keyword">QLabel</b> widget is used to display text or image. 
No user interaction is available.
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' This program shows lyrics on the
' window
'
' author jan bodnar
' last modified April 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QWidget

    Public Sub New()
    
        Me.SetWindowTitle("You know I'm no Good")
    
        Me.InitUI()
        
        Me.Resize(250, 200)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    
    Private Sub InitUI()
    
        Dim text As String
        text = "Meet you downstairs in the bar and heard" + vbNewLine + _
"your rolled up sleeves and your skull t-shirt" + vbNewLine + _
"You say why did you do it with him today?" + vbNewLine + _
"and sniff me out like I was Tanqueray" + vbNewLine + _
"" + vbNewLine + _
"cause you're my fella, my guy" + vbNewLine + _
"hand me your stella and fly" + vbNewLine + _
"by the time I'm out the door" + vbNewLine + _
"you tear men down like Roger Moore" + vbNewLine + _
"" + vbNewLine + _
"I cheated myself" + vbNewLine + _
"like I knew I would" + vbNewLine + _
"I told ya, I was trouble" + vbNewLine + _
"you know that I'm no good" 

        Dim label As New QLabel(text, Me)
        label.Font = New QFont("Purisa", 9)

        Dim vbox As New QVBoxLayout()
        vbox.AddWidget(label)
        SetLayout(vbox)
    
    End Sub


    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
Our example shows lyrics of a song in the window. 
</p>

<pre class="explanation">
Dim text As String
text = "Meet you downstairs in the bar and heard" + vbNewLine + _
"your rolled up sleeves and your skull t-shirt" + vbNewLine + _
...
</pre>

<p>
We define a multi line text. Unlike in C#, Python or Ruby, there is no
simple construct to create a multi line text in Visual Basic language. 
To create a multi line text in Visual Basic, we use the <b class="keyword">vbNewLine</b>
print constant, the <b class="keyword">+</b> concatenation character and 
the <b class="keyword">_</b> line termination character.
</p>

<pre class="explanation">
Dim label As New QLabel(text, Me)
label.Font = New QFont("Purisa", 9)
</pre>

<p>
We create the label widget and change its font. 
</p>

<pre class="explanation">
Dim vbox As New QVBoxLayout()
vbox.AddWidget(label)
SetLayout(vbox)
</pre>

<p>
Instead of manually coding the position and size of the
label, we put the label into a box layout. 
</p>

<br>
<img src="/img/gui/vbqyoto/qlabel.png" alt="QLabel">
<div class="figure">Figure: QLabel</div>


<h2>QLineEdit</h2>

<p>
The <b class="keyword">QLineEdit</b> is a widget that allows to enter and 
edit a single line of plain text. There are undo/redo, cut/paste and 
drag &amp; drop functions available for QLineEdit widget. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' This program demonstrates the 
' QLineEdit widget. Text entered in the QLineEdit
' widget is shown in a QLabel widget.
'
' author jan bodnar
' last modified April 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QWidget

    Dim label As QLabel

    Public Sub New()
    
        Me.InitUI()
        
        Me.SetWindowTitle("QLineEdit")
        Me.Resize(250, 200)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    
    Private Sub InitUI()
    
        label = New QLabel(Me)

        Dim edit As New QLineEdit(Me)
        Connect(edit, SIGNAL("textChanged(QString)"), Me, _
            SLOT("OnChanged(QString)"))
        
        edit.Move(60, 100)
        label.Move(60, 40)
        
    End Sub

    &lt;Q_SLOT()&gt; _
    Private Sub OnChanged(ByVal text As String)
    
        label.SetText(text)
        label.AdjustSize()
       
    End Sub

    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
In our example we show two widgets. A line edit and a label widget. The text
entered into the line edit is shown in the label widget. 
</p>

<pre class="explanation">
Dim edit As New QLineEdit(Me)
</pre>

<p>
The <b class="keyword">QLineEdit</b> widget is created. 
</p>

<pre class="explanation">
Connect(edit, SIGNAL("textChanged(QString)"), Me, _
    SLOT("OnChanged(QString)"))
</pre>

<p>
When we type or delete some text from the line edit, the <b class="keyword">OnChanged()</b>
method is triggered. The method takes a string parameter. 
</p>

<pre class="explanation">
&lt;Q_SLOT()&gt; _
Private Sub OnChanged(ByVal text As String)

    label.SetText(text)
    label.AdjustSize()
    
End Sub
</pre>

<p>
In the <b class="keyword">OnChanged()</b> method, we set the contents of the line edit
to the label widget. The <b class="keyword">AdjustSize()</b> method ensures, that all
text is visible. 
</p>

<br>
<img src="/img/gui/vbqyoto/qlineedit.png" alt="QLineEdit widget">
<div class="figure">Figure: QLineEdit widget</div>


<h2>Toggle buttons</h2>

<p>
Toggle buttons are push buttons with a checkable flag set. Toggle button is a 
button that has two states. Pressed and not pressed. You toggle between these 
two states by clicking on it. There are situations where this functionality fits well. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' This program uses toggle buttons to 
' change the background color of
' a widget
'
' author jan bodnar
' last modified April 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QWidget

    Dim square As QWidget
    Dim color As QColor
 
    Dim redb As QPushButton
    Dim greenb As QPushButton
    Dim blueb As QPushButton
    

    Public Sub New()
    
        Me.InitUI()
        
        Me.SetWindowTitle("Toggle buttons")
        Me.Resize(350, 240)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    
    Private Sub InitUI()
    
        color = New QColor()

        redb = New QPushButton("Red", Me)
        redb.Checkable = True
        greenb = New QPushButton("Green", Me)
        greenb.Checkable = True
        blueb = New QPushButton("Blue", Me)
        blueb.Checkable = True

        Connect(redb, SIGNAL("toggled(bool)"), Me, SLOT("OnToggled()"))
        Connect(greenb, SIGNAL("toggled(bool)"), Me, SLOT("OnToggled()"))
        Connect(blueb, SIGNAL("toggled(bool)"), Me, SLOT("OnToggled()"))
      
        square = New QWidget(Me)
        square.SetStyleSheet("QWidget { background-color: black }")
        
        redb.Move(30, 30)
        greenb.Move(30, 80)
        blueb.Move(30, 130)
        square.SetGeometry(150, 25, 150, 150)
        
    End Sub

    &lt;Q_SLOT()&gt; _
    Private Sub OnToggled()
    
        Dim red As Integer = color.Red()
        Dim green As Integer = color.Green()
        Dim blue As Integer = color.Blue()
        
        If redb.Checked 
            red = 255
        Else 
            red = 0
        End If
  
        If greenb.Checked
            green = 255
        Else 
            green = 0
        End If

        If blueb.Checked
            blue = 255
        Else 
            blue = 0
        End If
        
        color = New QColor(red, green, blue)

        Dim sheet As String = String.Format("QWidget {{ background-color: {0} }}", _
            color.Name())
        square.SetStyleSheet(sheet)
       
    End Sub

    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
In the code example, we use three toggle buttons to change the color
of a rectangular widget. 
</p>

<pre class="explanation">
Dim square As QWidget
Dim color As QColor

Dim redb As QPushButton
Dim greenb As QPushButton
Dim blueb As QPushButton
</pre>

<p>
We define five objects. The square widget is a <b class="keyword">QWidget</b>, which
shows the color. The <b class="keyword">color</b> variable is used to hold the color value. The three buttons
are toggle buttons, which are used to mix the color value. 
</p>

<pre class="explanation">
redb = New QPushButton("Red", Me)
redb.Checkable = True
</pre>

<p>
We create a <b class="keyword">QPushButton</b> widget. The
<b class="keyword">Checkable</b> property changes the push button
into a toggle button. 
</p>

<pre class="explanation">
Connect(redb, SIGNAL("toggled(bool)"), Me, SLOT("OnToggled()"))
Connect(greenb, SIGNAL("toggled(bool)"), Me, SLOT("OnToggled()"))
Connect(blueb, SIGNAL("toggled(bool)"), Me, SLOT("OnToggled()"))
</pre>

<p>
All three buttons are plugged into one method call, the <b class="keyword">OnToggled()</b> method.
</p>

<pre class="explanation">
square = New QWidget(Me)
square.SetStyleSheet("QWidget { background-color: black }")
</pre>

<p>
We create the square widget. At the beginning, it is black. 
In Qyoto, we use style sheets to customize the appearance of a widget. 
</p>

<p>
Inside the <b class="keyword">OnToggled()</b> method, we determine the color value and
update the square widget to a new color. 
</p>

<pre class="explanation">
Dim red As Integer = color.Red()
Dim green As Integer = color.Green()
Dim blue As Integer = color.Blue()
</pre>

<p>
Here we determine the current color of the square widget. 
</p>

<pre class="explanation">
If redb.Checked 
    red = 255
Else 
    red = 0
End If
</pre>

<p>
Change the red part of the color, depending on the state of the red toggle button.
</p>

<pre class="explanation">
color = New QColor(red, green, blue)
</pre>

<p>
We create a new color value.
</p>

<pre class="explanation">
Dim sheet As String = String.Format("QWidget {{ background-color: {0} }}", _
    color.Name())
</pre>

<p>
We use the Visual Basic Format object to create the appropriate stylesheet. 
</p>

<pre class="explanation">
square.SetStyleSheet(sheet)
</pre>

<p>
The color of the square is updated. 
</p>

<br>
<img src="/img/gui/vbqyoto/togglebuttons.png" alt="Toggle buttons">
<div class="figure">Figure: Toggle buttons</div>


<h2>QComboBox</h2>

<p>
The <b class="keyword">QComboBox</b>  is a widget that allows the 
user to choose from a list of options. It is a selection widget 
that displays the current item, and can pop up a list of selectable items.
A combo box may be editable. It presents a list of options to the user in 
a way that takes up the minimum amount of screen space.
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' In this program, we use the QComboBox
' widget to select an option. 
' The selected option is shown in the
' QLabel widget
'
' author jan bodnar
' last modified April 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QWidget

    Dim label As QLabel

    Public Sub New()

        Me.SetWindowTitle("QComboBox")

        Me.InitUI()
        
        Me.Resize(250, 200)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    
    Private Sub InitUI()
    
        label = New QLabel("Ubuntu", Me)
        
        Dim combo As New QComboBox(Me)
        combo.AddItem("Ubuntu")
        combo.AddItem("Mandriva")
        combo.AddItem("Fedora")
        combo.AddItem("Red Hat")
        combo.AddItem("Gentoo")
        
        combo.Move(50, 30)
        label.Move(50, 100)
        
        Connect(combo, SIGNAL("activated(QString)"), _
                 Me, SLOT("OnActivated(QString)"))
        
    End Sub

    &lt;Q_SLOT()&gt; _
    Private Sub OnActivated(ByVal text As String)

        label.SetText(text)
        label.AdjustSize()
       
    End Sub

    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
In our code example, we have two widgets. A combo box and a label widget. 
The option selected from a combo box is shown in the label. 
</p>

<pre class="explanation">
label = New QLabel("Ubuntu", Me)
</pre>

<p>
This is the label, that will show the currently selected option
from the combo box. 
</p>

<pre class="explanation">
Dim combo As New QComboBox(Me)
</pre>

<p>
We create the instance of the <b class="keyword">QComboBox</b> widget. 
</p>

<pre class="explanation">
combo.AddItem("Ubuntu")
combo.AddItem("Mandriva")
combo.AddItem("Fedora")
combo.AddItem("Red Hat")
combo.AddItem("Gentoo")
</pre>

<p>
Combo box is filled with values. 
</p>

<pre class="explanation">
Connect(combo, SIGNAL("activated(QString)"), _
          Me, SLOT("OnActivated(QString)"))
</pre>

<p>
When we select an option from the combo box, the <b class="keyword">OnActivated()</b> method
is triggered. 
</p>

<pre class="explanation">
&lt;Q_SLOT()&gt; _
Private Sub OnActivated(ByVal text As String)

    label.SetText(text)
    label.AdjustSize()
    
End Sub
</pre>

<p>
In the <b class="keyword">OnActivated()</b> method, we update the label widget to the 
currently selected string from the combo box. 
</p>

<br>
<img src="/img/gui/vbqyoto/qcombobox.png" alt="QComboBox widget">
<div class="figure">Figure: QComboBox widget</div>

<hr class="btm">

<p>
In this part of the Visual Basic Qyoto tutorial, we have presented several Qyoto widgets. 
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br> 

<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified May 17, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>